<template>
<el-card>
    <el-table :data="songList" style="width: 100%" @row-click="handleSelect">
        <el-table-column type="index" width="80" />
        <el-table-column prop="name" label="歌名" width="160" />
        <el-table-column prop="singer" label="歌手" />
        <el-table-column prop="introduction" label="专辑" width="160" />
    </el-table>
</el-card>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const songList = ref([{
    name: '那时的我们',
    singer: '毛不易',
    introduction: '那时的我们',
    url: 'http://music.163.com/song/media/outer/url?id=447925558.mp3'
}, {
    name: '仰望星空',
    singer: '张杰',
    introduction: '明天过后',
    url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
}])




const router = useRouter();

const handleSelect = (row) => {
    router.push({
        path: '/play',
        query: {
            url: row.url
        }
    });
}
</script>

<style scoped></style>
